<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>Dimensions Demo</title>
        <style type='text/css'>
            body {font-family: verdana}
            #inner {
                height: 100%;
                width: 100%;
                background-color: red;
            }
            #block {
                height: 200px;
                width: 200px;
                padding: 0 40px 40px 0;
                margin: 0 10px 10px 0;
                background-color: blue;
                border-right: solid 20px green;
                border-bottom: solid 20px green;
            }
            #wrapper {
                border: dashed 1px gray;
                float: left;
                clear: left;
                background-color: yellow;
            }
            #width { background-color: red;}
            #paddingRight {background-color: blue;}
            #borderRightWidth {background-color: green;}
            #innerWidth {color: #000080;}
            #outerWidth {color: #008000;}
            #marginRight {background-color: yellow}
            input {
                text-align: right;
                font-size: 14pt;
                font-weight: bold;
                width: 100px;
            }
            label {
                display: inline-block;
                width: 100px;
                text-align: right;
            }
        </style>
    </head>
    <body>

    
<div id="demo-html">
<p>Adjust The red box's layout properties.</p>
<label>  Width</label> <input id='width'/><br/>
<label>+ Padding </label> <input id='paddingRight'/><br/>
<label>= Inner</label> <input id='innerWidth'/><br/>
<label>+ Border</label> <input id='borderRightWidth'/><br/>
<label>= Outer</label> <input id='outerWidth'/><br/>
<label>  Margin</label> <input id='marginRight'/><br/>
<br/>
    
<div id='wrapper'>
    <div id='block'>
        <div id='inner'>
            Adjust My Layout Properties
        </div>
    </div>
</div>
</div>
<div style='clear:both'></div>
        <script type='text/javascript' 
                src='../../../steal/steal.js'>   
        </script>
<script type='text/javascript'>
    steal.plugins('jquery/dom/dimensions').start()
</script>
<script type='text/javascript' id="demo-source">
// sets the values in the input boxes
var set = function() {
    
  var block =  $('#block');
    
  //get with .fn helpers
  $("#outerWidth, #innerWidth, #width").each(function(){
    $(this).val( block[this.id]() )
  })
    
  //use curStyles
  $.each($('#block').curStyles("paddingRight",
    "borderRightWidth",
    "marginRight"), function(name, val){
    $("#"+name).val( parseInt(val)  )
  });
}
set();

// updates the dimensions of the block
var update = function( ev ) {
  var name = ev.target.id,
      val = parseInt( $(ev.target).val() ),
      opposite = {Width: "Height", Right: "Bottom"},
      // the opposite dimension name
      otherName = name.replace(/width|right/i, function(part, i){
        return i == 0 ? "height" : opposite[part];
      }),
      block = $('#block'),
      css = {};

  if( block[name] ) { 
    // set with innerHeight, outerHeight, etc
    block[name]( val )[otherName](val)
  }else{
    // set as css property
    css[name] = val+"px"
    css[otherName] = val+"px"
    block.css(css)
  }

  set();
};

// call update on change or after  
// typing has stopped for a second
var timer;
$("input").live('change',update)
$("input").live('keyup',function(ev) {
  clearTimeout(timer)
  timer = setTimeout(function() {
    update(ev)
  },1400)
})
</script>
    </body>
</html>